<template>
  <div class="news-list flex js-ct">
    <div class="news radius-8 person-bg">
      <div class="news-title flex js-sp align-center bdb-borderBase mb-20">
        <span class="downt1 text-18">{{ $t("global.newsList") }}</span>
        <!-- 搜索框 -->
        <div class="help-header flex js-sp">
          <el-input
            :placeholder="$t('tips.searchTip')"
            v-model="state.listparam.notice_title"
          >
            <template #prepend>
              <img src="@/assets/images/search.png" alt class="search-icon" />
            </template>
            <template #append>
              <span class="personlink text-14 point" @click="search">{{
                $t("exchange.search")
              }}</span>
            </template>
          </el-input>
        </div>
      </div>
      <!-- 所有文章  -->
      <div
        class="all mb-30 text-left flex js-sp point"
        v-for="item in state.noticeList"
        @click="checkDetail(item.id)"
        :key="item.id"
      >
        <div class="all-left">
          <div class="name mb-12 text-18 textperson-t2 text-medium break-all">
            {{ item.notice_title }}
            <!-- - {{ item.notice_show_time }} -->
          </div>
          <div class="search-content textperson-t3 mb-12">
            {{ item.describe }}
          </div>
          <div class="textperson-t3 text-left text-12">
            {{ item.notice_show_time }}
          </div>
        </div>
        <div class="all-right">
          <img :src="item.source_url" alt />
        </div>
      </div>
      <Norecord v-if="state.noticeList.length === 0" />
      <!-- 分页 -->
      <div class="pagin">
        <Pagination
          :total="state.total"
          :size="state.listparam.limit"
          :current="state.curentpage"
          @currentchange="currentchange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { onMounted, reactive } from "vue";
import { contentMessagePage } from "@/api/article";
import Pagination from "@/components/pagination/index.vue";
import Norecord from "@/components/noRecord/NoRecord.vue";
import { useStore } from "vuex";

export default {
  components: { Pagination, Norecord },
  setup() {
    const state = reactive({
      noticeList: [],
      total: 0,
      curentpage: 1,
      listparam: {
        application_type: "PC",
        limit: 10,
        page: 0,
      },
    });
    /**
     * methods
     */
    const $router = useRouter();
    // 获取资讯列表
    const getList = () => {
      contentMessagePage(state.listparam).then((res) => {
        state.noticeList = res.data.items;
        state.total = res.data.total;
      });
    };
    const checkDetail = (id) => {
      $router.push({ path: "/detail", query: { id: id, type: 3 } });
    };
    //  分页
    const currentchange = (val) => {
      state.listparam.page = val;
      getList();
    };
    const search = () => {
      getList();
    };
    const $store = useStore();
    onMounted(() => {
      getList();
      $store.commit("user/SET_CHANGELOCAL", 0);
    });
    return {
      state,
      getList,
      checkDetail,
      search,
      currentchange,
    };
  },
};
</script>

<style scoped lang="less">
.news-list {
  width: 100%;
  padding: 30px 0 60px 0;
}
.news {
  width: 1120px;
  min-height: 720px;
  padding-bottom: 60px;
  position: relative;
}
.news-title {
  width: 100%;
  height: 60px;
  padding: 0 30px;
}
.help-header /deep/ .el-input__inner {
  border: none;
  background: #f8f8f8;
}
.help-header /deep/ .el-input-group__prepend {
  border: none;
  background: #f8f8f8;
}
.help-header /deep/ .el-input-group__append {
  border: none;
}
.all {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
}
.search-content {
  height: 40px;
  line-height: 19.6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: 1px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-20 {
  margin-bottom: 20px;
}
.all-left {
  width: 807px;
}
.p-30 {
  padding: 0 30px;
}
.all-right {
  width: 184px;
  height: 104px;
  img {
    width: 100%;
    height: 100%;
  }
}
.pagination {
  padding: 0 30px;
}
.jump {
  width: 44px;
  height: 20px;
  line-height: 20px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
.pagin {
  position: absolute;
  right: 60px;
  bottom: 30px;
}
.break-all {
  word-break: break-all;
}
</style>
